<script setup>
import { ref } from 'vue';
import { Search, Refresh, Download, ArrowUp, ArrowDown } from '@element-plus/icons-vue';
import { useActionSearchStore } from '../../store/action/actionSearch';
import { useAddActionStore } from '../../store/action/addActionStore';

//初始化搜索表单数据
const addActionStore = useAddActionStore()
const actionSearchStore = useActionSearchStore()
const name = ref()
</script>
<template>
    <div class="action-main">
        <div class="header-controls">
            <el-tooltip :content="actionSearchStore.isSearchVisible ? '隐藏搜索区' : '显示搜索区'" placement="top"
                effect="light">
                <el-button type="primary" class="toggle-search-btn" @click="actionSearchStore.toggleSearchArea">
                    <el-icon>
                        <component :is="actionSearchStore.isSearchVisible ? ArrowUp : ArrowDown" />
                    </el-icon>
                </el-button>
            </el-tooltip>
        </div>
        <el-form :model="actionSearchStore.searchForm" class="search-form" inline v-show="actionSearchStore.isSearchVisible">
            <el-form-item prop="name" label="活动名称">
                <el-input style="width:240px;" v-model="actionSearchStore.searchForm.name" placeholder="请输入活动名称">
                    <template #prefix>
                        <el-icon>
                            <Search />
                        </el-icon>
                    </template>
                </el-input>
            </el-form-item>
            <!-- 活动时间范围 -->
            <el-form-item label="展览时间">
                <el-date-picker v-model="actionSearchStore.searchForm.dateRange" type="daterange" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                    :shortcuts="[
                        { text: '最近一周', value: [new Date(Date.now() - 7 * 24 * 60 * 60 * 1000), new Date()] },
                        { text: '最近一个月', value: [new Date(Date.now() - 30 * 24 * 60 * 60 * 1000), new Date()] },
                        { text: '最近三个月', value: [new Date(Date.now() - 90 * 24 * 60 * 60 * 1000), new Date()] }
                    ]" />
            </el-form-item>
            <!--活动类型-->
            <el-form-item label="活动类型">
                <el-select style="width:240px;" clearable v-model="actionSearchStore.searchForm.type"
                    placeholder="请选择活动状态">
                    <el-option v-for="item in actionSearchStore.actionType" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <!--活动状态--->
            <el-form-item label="活动状态">
                <el-select style="width:240px;" clearable v-model="actionSearchStore.searchForm.status"
                    placeholder="请选择活动状态">
                    <el-option v-for="item in actionSearchStore.actionStatus" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="actionSearchStore.getActionList">查询</el-button>
                <el-button @click="actionSearchStore.resetSearch">重置</el-button>
            </el-form-item>
        </el-form>
        <div class="action-container">
            <el-button type="success" @click="addActionStore.setAddAction(true)">
                <el-icon>
                    <Plus />
                </el-icon>添加展览
            </el-button>
            <el-button type="info" @click="" :icon="Download">导出数据</el-button>
        </div>
    </div>
</template>
<style scoped>
.header-controls {
  position: absolute;
  right: 20px;
  top: 10px;
  z-index: 1;
}
.toggle-search-btn {
  padding: 4px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #f5f7fa;
  transition: all 0.3s;
}

.toggle-search-btn:hover {
  background-color: #ecf5ff;
  color: #409EFF;
}
.action-main {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
}

.action-container {
    display: flex;
    justify-content: flex-start;
    padding-top: 10px;
    border-top: 1px solid #ebeef5;
}
</style>